import BidirectionalBarChart from '@/components/BidirectionalBarChart';
import BrandTable from '@/components/BrandTable';
import ColumnLineChart from '@/components/ColumnLineChart';
import PieChart from '@/components/PieChart';
import PieSpiderChart from '@/components/PieSpiderChart';
import RadarChart from '@/components/RadarChart';
import ScatterChart from '@/components/ScatterChart';
import VennChart from '@/components/VennChart';
import { Button } from 'antd';
import React, { useMemo, useState } from 'react';
import { ButtonMsg } from './components/introduceButton';
import useBidirectionalBarChart from './hooks/useBidirectionalBarChart';
import useBrandTable from './hooks/useBrandTable';
import useColumnLineChart from './hooks/useColumnLineChart';
import usePieChart from './hooks/usePieChart';
import usePieSpiderChart from './hooks/usePieSpiderChart';
import useRadarChartData from './hooks/useRadarChartData';
import useScatterChart from './hooks/useScatterChart';
import useVennChart from './hooks/useVennChart';

const DataScreen: React.FC = () => {
  // 定义dom结构，给图标绑定节点
  const radarChartId = 'radarChartId';
  const pieSpiderChartID = 'pieSpiderChartID';
  const vennChartID = 'vennChartID';
  const columnLineChart = 'columnLineChart';
  const bidirectionalBarChart = 'bidirectionalBarChart';
  const pieChartID = 'pieChartID';
  const brandTable = 'brandTable';
  const scatterChartID = 'scatterChartID';

  //获取雷达图的数据
  const radarChart = useRadarChartData();
  //在传入的参数不变时避免重新渲染子组件，可以使用React.memo和useMemo这两个React的优化手段。
  const memoizedRadarChartId = useMemo(() => radarChartId, [radarChartId]);
  const memoizedRadarChartData = useMemo(() => radarChart, [radarChart]);

  //获取预制菜市场占有率的数据
  const pieSpiderChart = usePieSpiderChart();
  const memoizedpieSpiderChartID = useMemo(
    () => pieSpiderChartID,
    [pieSpiderChartID],
  );
  const memoizedpieSpiderChart = useMemo(
    () => pieSpiderChart,
    [pieSpiderChart],
  );

  //获取韦恩图的数据
  const vennChart = useVennChart();
  const memoizedVennChartID = useMemo(() => vennChartID, [vennChartID]);
  const memoizedVennChart = useMemo(() => vennChart, [vennChart]);

  //获取柱状图的数据
  const columnLineChartList = useColumnLineChart();
  const memoizedcolumnLineChart = useMemo(
    () => columnLineChart,
    [columnLineChart],
  );
  const memoizedColumnLineChartList = useMemo(
    () => columnLineChartList,
    [columnLineChartList],
  );

  //获取堆叠条形图的数据
  const bidirectionalBarChartList = useBidirectionalBarChart();
  const memoizedBidirectionalBarChart = useMemo(
    () => bidirectionalBarChart,
    [bidirectionalBarChart],
  );
  const memoizedBidirectionalBarChartList = useMemo(
    () => bidirectionalBarChartList,
    [bidirectionalBarChartList],
  );

  //获取消费者行为分析图的数据
  const pieChart = usePieChart();
  const memoizedPieChartID = useMemo(() => pieChartID, [pieChartID]);
  const memoizedPieChart = useMemo(() => pieChart, [pieChart]);

  //获取品牌总览的数据
  const brandTableList = useBrandTable();
  const memoizedBrandTable = useMemo(() => brandTable, [brandTable]);
  const memoizedBrandTableList = useMemo(
    () => brandTableList,
    [brandTableList],
  );

  //获取散点图的数据
  const scatterChart = useScatterChart();
  const memoizedScatterChartID = useMemo(
    () => scatterChartID,
    [scatterChartID],
  );
  const memoizedScatterChart = useMemo(() => scatterChart, [scatterChart]);

  //品牌总览的数据类型
  type BrandTableColumn = {
    title: string;
    dataIndex: string;
  };
  type BrandTableDataItem = {
    key: string;
    name: string;
    product: string;
  };
  type BrandTableData = [BrandTableColumn[], BrandTableDataItem[]];

  //散点图的数据类型
  type ScatterChartDataList = ScatterChartData;
  type ScatterChartData = [User[], Product[]];
  type User = {
    用户名: string;
    用户ID: string;
    手机号码: number;
    年龄: string;
    消费金额: number;
    月份: number;
    购买渠道: string;
    购买产品: string;
    购买数量: number;
  };
  type Product = {
    品名: string;
    品牌: string;
    产品编号: string;
    产品规格: string;
    产品单价: number;
    月份: number;
    口味: string;
    生产日期: string;
    购买数量: number;
  };

  // 消费者行为分析的年份切换
  const [yearFlag, setyearFlag] = useState('2023');
  const [yearParam, setyearParam] = useState('2023');
  const handleBtns = (e: any) => {
    console.log(e.target.textContent);
    setyearFlag(e.target.textContent);
    setyearParam(e.target.textContent);
  };

  //消费者购买数据散点图切换
  const [buyFlag, setbuyFlag] = useState('消费者');
  const [buyParam, setbuyParam] = useState('消费者');
  const handleBuyBtns = (e: any) => {
    console.log(e.target.textContent);
    setbuyFlag(e.target.textContent);
    setbuyParam(e.target.textContent);
  };

  // const data1= [
  //   { item: '料理包1', type: '本月', score: 30 },
  //   { item: '料理包1', type: '上月', score: 70 },
  //   { item: '西式料理1', type: '本月', score: 60 },
  //   { item: '西式料理1', type: '上月', score: 70 },
  //   { item: '家庭菜肴1', type: '本月', score: 60 },
  //   { item: '家庭菜肴1', type: '上月', score: 50 },
  //   { item: '汤包1', type: '本月', score: 40 },
  //   { item: '汤包1', type: '上月', score: 50 },
  //   { item: '快餐食品1', type: '本月', score: 60 },
  //   { item: '快餐食品1', type: '上月', score: 70 },
  //   { item: '自热盒饭1', type: '本月', score: 70 },
  //   { item: '自热盒饭1', type: '上月', score: 50 },
  // ];
  // const handleDataChange = () => {
  //   setRadarChart(data1)
  // }

  return (
    // div需不需要换回页容器PageContainer视后期页面样式调整复杂度而定
    <div className="dataScreenFrame">
      {/* 数据大屏主体 */}
      <div
        style={{
          display: 'flex',
          height: '100vh',
        }}
      >
        {/* 数据大屏左侧一列 */}
        <div
          style={{
            width: '25vw',
            height: '100vh',
            position: 'relative',
            top: '0',
            left: '0',
          }}
        >
          {/* 封装通用型小标题hooks */}
          {/* onClick={handleDataChange} */}
          <div
            style={{
              position: 'absolute',
              top: '10%',
              left: '11%',
              width: '12rem',
              height: '2rem',
            }}
          >
            <ButtonMsg Msg={'预制菜消费者偏好分析:'} />
          </div>
          {/* 消费者偏好雷达图 */}
          <div
            style={{
              width: '20vw',
              position: 'absolute',
              top: '13%',
              left: '18%',
              height: '32vh',
            }}
            id={memoizedRadarChartId}
          >
            {/* <div style={{textAlign:'start',fontSize: '1.1rem',marginTop:'2.6rem',marginBottom:'0.2rem'}}>预制菜消费者偏好分析</div> */}
            {radarChart.length > 0 && (
              <RadarChart
                radarChartId={memoizedRadarChartId}
                RadarChartData={memoizedRadarChartData}
              />
            )}
          </div>
          <div
            style={{
              position: 'absolute',
              top: '44%',
              left: '10%',
              width: '12rem',
              height: '2rem',
            }}
          >
            <ButtonMsg Msg={'预制菜品牌市场占有率:'} />
          </div>
          {/* 品牌市场占有率饼状图 */}
          <div
            style={{
              textAlign: 'center',
              position: 'absolute',
              top: '47%',
              left: '18%',
              width: '20vw',
              height: '26vh',
            }}
            id={memoizedpieSpiderChartID}
          >
            {/* <div style={{textAlign:'start',fontSize: '1.1rem'}}>预制菜市场占有率</div> */}
            {pieSpiderChart.length > 0 && (
              <PieSpiderChart
                pieSpiderChartData={memoizedpieSpiderChart}
                pieSpiderChartID={memoizedpieSpiderChartID}
              />
            )}
          </div>
          {/* 左下角韦恩图 */}
          <div
            style={{
              position: 'absolute',
              top: '71%',
              left: '10%',
              width: '12rem',
              height: '2rem',
            }}
          >
            <ButtonMsg Msg={'产品流通渠道:'} />
          </div>
          <div
            style={{
              textAlign: 'center',
              position: 'absolute',
              top: '74%',
              left: '15%',
              width: '20vw',
              height: '25vh',
            }}
            id={memoizedVennChartID}
          >
            {/* <div style={{textAlign:'start',fontSize: '1.1rem'}}>产品流通渠道</div> */}
            {vennChart.length > 0 && (
              <VennChart
                VennChartDataList={memoizedVennChart}
                vennChartID={memoizedVennChartID}
              />
            )}
          </div>
        </div>
        {/* 数据大屏中间一列 */}
        <div
          style={{
            width: '50vw',
            height: '100vh',
            position: 'relative',
          }}
        >
          {/* <div style={{fontSize: '2rem',textAlign:'center'}}>预制菜大数据分析</div> */}
          {/* 柱状图 */}
          <div
            style={{
              position: 'absolute',
              top: '10%',
              left: '5%',
              width: '12rem',
              height: '2rem',
            }}
          >
            <ButtonMsg Msg={'预制菜市场规模及预测:'} />
          </div>
          <div
            style={{
              textAlign: 'center',
              position: 'absolute',
              top: '13%',
              left: '6%',
              width: '45vw',
              height: '48vh',
            }}
            id={memoizedcolumnLineChart}
          >
            {/* <div style={{textAlign:'start',paddingLeft:'5%',fontSize: '1.1rem'}}>预制菜市场规模及预测</div> */}
            {columnLineChartList.length > 0 && (
              <ColumnLineChart
                columnLineChartData={memoizedColumnLineChartList}
                columLineChartId={memoizedcolumnLineChart}
              />
            )}
          </div>
          {/* 堆叠条形图和环图容器 */}
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',
            }}
          >
            {/* 堆叠条形图 */}
            <div
              style={{
                position: 'absolute',
                top: '60%',
                left: '5%',
                width: '10rem',
                height: '2rem',
              }}
            >
              <ButtonMsg Msg={'预制菜供需量对比:'} />
            </div>
            <div
              id={memoizedBidirectionalBarChart}
              style={{
                position: 'absolute',
                top: '64%',
                left: '3%',
                width: '30vw',
                height: '37vh',
              }}
            >
              {/* <div style={{textAlign:'start',paddingLeft:'5%',fontSize: '1.1rem'}}>预制菜供需求对比</div> */}
              {bidirectionalBarChartList.length > 0 && (
                <BidirectionalBarChart
                  BidirectionalBarChartList={memoizedBidirectionalBarChartList}
                  BidirectionalBarChartID={memoizedBidirectionalBarChart}
                />
              )}
            </div>
            {/* 环图 */}
            <div
              style={{
                position: 'absolute',
                top: '60%',
                left: '63%',
                width: '9rem',
                height: '2rem',
              }}
            >
              <ButtonMsg Msg={'消费者行为分析:'} />
            </div>
            <div
              id={memoizedPieChartID}
              style={{
                position: 'absolute',
                top: '65%',
                left: '63%',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                {/* <div style={{textAlign:'start',paddingLeft:'5%',fontSize: '1.1rem'}}>消费者行为分析</div> */}
                <div
                  style={{ display: 'flex', gap: '0.3rem' }}
                  onClick={handleBtns}
                >
                  <Button
                    size="small"
                    type={yearFlag === '2023' ? 'primary' : 'default'}
                  >
                    2023
                  </Button>
                  <Button
                    size="small"
                    type={yearFlag === '2022' ? 'primary' : 'default'}
                  >
                    2022
                  </Button>
                  <Button
                    size="small"
                    type={yearFlag === '2021' ? 'primary' : 'default'}
                  >
                    2021
                  </Button>
                </div>
              </div>
              <div style={{ width: '20vw', height: '30vh' }}>
                {pieChart.length > 0 && (
                  <PieChart
                    PieChartData={memoizedPieChart}
                    yearParam={yearParam}
                    pieChartID={memoizedPieChartID}
                  />
                )}
              </div>
            </div>
          </div>
        </div>
        {/* 数据大屏右侧一列 */}
        <div
          style={{
            width: '25vw',
            height: '100vh',
            position: 'relative',
            top: '0px',
            left: '0px',
          }}
        >
          <div
            style={{
              position: 'absolute',
              top: '10%',
              left: '1%',
              width: '9rem',
              height: '2rem',
            }}
          >
            <ButtonMsg Msg={'预制菜品牌总览:'} />
          </div>
          {/* 品牌总览 */}
          <div
            id={memoizedBrandTable}
            style={{
              textAlign: 'center',
              position: 'absolute',
              top: '15%',
              left: '1%',
              width: '22vw',
              height: '48vh',
            }}
          >
            {/* <div style={{textAlign:'start',fontSize: '1.1rem',marginTop:'1.8rem',marginBottom:'0.2rem'}}>预制菜品牌总览</div> */}
            {/* hello_wprld   使用类型转换函数as而不是类型断言，将brandTableList转换为unknown类型，然后再转换为BrandTableData类型，否则报错*/}
            {brandTableList.length > 0 && (
              <BrandTable
                TableData={memoizedBrandTableList as unknown as BrandTableData}
                TableDataID={memoizedBrandTable}
              />
            )}
          </div>
          <div
            style={{
              position: 'absolute',
              top: '63%',
              left: '1%',
              width: '9rem',
              height: '2rem',
            }}
          >
            <ButtonMsg Msg={'消费者购买数据:'} />
          </div>
          {/* 散点图 */}
          <div
            id={memoizedScatterChartID}
            style={{
              marginTop: '13%',
              width: '20vw',
              position: 'absolute',
              top: '58%',
              left: '0%',
              height: '30vh',
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              {/* <div style={{textAlign:'start',fontSize: '1.1rem',marginBottom:'0.2rem',marginTop:'0.2rem'}}>消费者购买数据</div> */}
              <div
                onClick={handleBuyBtns}
                style={{ display: 'flex', gap: '0.4rem', marginBottom: '2%' }}
              >
                <Button
                  size="small"
                  type={buyFlag === '消费者' ? 'primary' : 'default'}
                >
                  消费者
                </Button>
                <Button
                  size="small"
                  type={buyFlag === '产 品' ? 'primary' : 'default'}
                >
                  产品
                </Button>
              </div>
            </div>
            {scatterChart.length > 0 && (
              <ScatterChart
                ScatterChartDataList={
                  memoizedScatterChart as unknown as ScatterChartDataList
                }
                buyParam={buyParam}
                scatterChartID={memoizedScatterChartID}
              />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};
export default DataScreen;
